import { Form, Input, Button, Image, Toast } from 'antd-mobile'
import { useParams, useNavigate } from 'react-router-dom'
import { merchantDetail, merchantSave } from '@api'
import { useEffect, useState, useRef } from 'react'
import { uploadFileToOSS } from '@utils/upload'
import './index.scss'
const EditMerchant = () => {
    const { shopId } = useParams()
    const navigate = useNavigate()

    const fileInputRef = useRef(null)

    const [details, setDetails] = useState(null)

    useEffect(() => {
        if (shopId) {
            merchantDetail({ id: shopId }).then(({ success, data }) => {
                if (success) {
                    setDetails(data)
                }
            })
        }
    }, [shopId])

    const handleButtonClick = () => {
        fileInputRef.current.click()
    }
    const handleFileChange = (event) => {
        // 处理文件选择
        const file = event.target.files[0]
        uploadFileToOSS({ file }).then(({ res }) => {
            const url = res.requestUrls[0].split('?')[0]
            setDetails({
                ...details,
                image: url
            })
        })
    }
    const onFinish = (val) => {
        merchantSave({
            ...details,
            ...val,
            unitAddress: `${val.province}${val.city}${val.area}${val.village}${val.street}${val.address}`
        }).then(({ success, info }) => {
            Toast.show(info)
            if (success) {
                navigate(-1)
            }
        })
    }
    return (
        <div className="EditMerchant">
            {details ? (
                <Form
                    layout="horizontal"
                    mode="card"
                    initialValues={details}
                    onFinish={onFinish}
                    footer={
                        <Button block type="submit" color="primary" size="large">
                            提交
                        </Button>
                    }
                >
                    <Form.Header>LOGO信息：</Form.Header>
                    <Form.Item>
                        <Image fit="cover" src={details.image} />
                        <Button color="primary" size="mini" style={{ marginTop: '20px' }} onClick={handleButtonClick}>
                            修改图片
                        </Button>
                    </Form.Item>
                    <Form.Header>基本信息：</Form.Header>
                    <Form.Item name="unit" label="单位名称">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item name="headName" label="负责人">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Header />
                    <Form.Item name="headPhone" label="电话">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item name="trade" label="行业类型" help="多个类型之间使用'/'隔开">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Header>地址信息：</Form.Header>
                    <Form.Item name="province" label="一级">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item name="city" label="二级">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item name="area" label="三级">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item name="street" label="四级">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item name="village" label="五级">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item name="address" label="六级">
                        <Input placeholder="请输入" />
                    </Form.Item>
                </Form>
            ) : null}
            <input type="file" style={{ display: 'none' }} ref={fileInputRef} onChange={handleFileChange} />
        </div>
    )
}
export default EditMerchant
